<script setup lang="ts">
useHead({
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { key: 'theme-color', name: 'theme-color', content: 'white' }
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' }
  ],
  htmlAttrs: {
    lang: 'zh-CN'
  }
})

useSeoMeta({
  titleTemplate: '%s - 迅达智讯',
  ogImage: 'https://ui.nuxt.com/assets/templates/nuxt/saas-light.png',
  twitterImage: 'https://ui.nuxt.com/assets/templates/nuxt/saas-light.png',
  twitterCard: 'summary_large_image'
})

const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('docs'), {
  transform: data => data.find(item => item.path === '/docs')?.children || []
})
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs'), {
  server: false
})

const links = [{
  label: 'Docs',
  icon: 'i-lucide-book',
  to: '/docs/getting-started'
}, {
  label: 'Pricing',
  icon: 'i-lucide-credit-card',
  to: '/pricing'
}, {
  label: 'Blog',
  icon: 'i-lucide-pencil',
  to: '/blog'
}, {
  label: 'Changelog',
  icon: 'i-lucide-history',
  to: '/changelog'
}]

provide('navigation', navigation)

// 动态设置 rem 适配（移动端 375px + 桌面端 1440px）
if (import.meta.client) {
  const { width } = useWindowSize({
    initialWidth: 1440,
    initialHeight: 1080
  })

  // 计算实际宽度（限制最小和最大值）
  const windowWidth = computed(() => {
    const minWidth = 375
    const maxWidth = 1440
    
    let _windowWidth = width.value
    
    if (width.value <= minWidth) {
      _windowWidth = minWidth
    } else if (width.value >= maxWidth) {
      _windowWidth = maxWidth
    }
    
    return _windowWidth
  })

  // 设置根字体大小的函数
  const setRootFontSize = () => {
    // 判断是移动端还是桌面端
    const isMobile = width.value < 768
    const baseWidth = isMobile ? 375 : 1440  // 移动端375px，桌面端1440px
    const baseFontSize = 16  // 基准字体大小
    
    // 计算缩放因子
    const scaleFactor = windowWidth.value / baseWidth
    const calculatedFontSize = scaleFactor * baseFontSize
    
    // 设置根元素字体大小
    document.documentElement.style.fontSize = calculatedFontSize + 'px'
  }

  // 监听宽度变化
  watch(width, setRootFontSize, { immediate: true })

  // 初始化时设置
  onMounted(() => {
    setRootFontSize()
  })
}
</script>

<template>
  <UApp>
    <NuxtLoadingIndicator />

    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>

    <ClientOnly>
      <LazyUContentSearch
        :files="files"
        shortcut="meta_k"
        :navigation="navigation"
        :links="links"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </UApp>
</template>
